<template>
  <backContainer>
    <div class="flexBet">
      <!-- tab -->
      <card :width="272" :top="24" height="208px" class="types">
        <div class="topline">全部分类</div>
        <div class="list">
          <div
            class="temp"
            :class="{ active: navtab == item.navtab }"
            @click="changeType(item)"
            v-for="(item, index) in types"
            :key="index"
          >
            <template v-if="$route.query.type == item.type">
              <img
                v-if="navtab == item.navtab"
                class="icon"
                :src="item.activeimg"
                alt="加载失败"
              />
              <img v-else class="icon" :src="item.img" alt="加载失败"/>
              <div>{{ item.name }}</div>
            </template>
            <div class="tag" v-if="unread > 0">
              {{ unread > 99 ? '99+' : unread }}
            </div>
          </div>
        </div>
      </card>
      <!-- 消息列表 -->
      <card :width="912" :top="24">
        <!-- 消息 -->
        <div class="message">
          <!-- 标题 -->
          <div class="flexBet" style="border-bottom: 1px solid #edeff0">
            <div class="topline_right">
              {{ unread }}条{{
                $route.query.type == 'course' ? '待办' : '消息'
              }}
              <img
                @click="clearUnread"
                class="clear_all_icon"
                src="@/assets/images/clear_all_icon.png"
                alt="加载失败"
              />
            </div>
            <div>
              <el-cascader
                :show-all-levels="false"
                style="width: 160px; margin: 24px 10px 0 0"
                size="mini"
                v-if="$route.query.type == 'course'"
                v-model="keys.indexId"
                placeholder="请选择内容"
                :options="courseIndexTree"
                @change="intoStorge"
                value="id"
                label="name"
                filterable
                clearable
                :props="{
                  expandTrigger: 'hover',
                  checkStrictly: true,
                  value: 'id',
                  label: 'name',
                }"
              >
              </el-cascader>
              <el-select
                @change="intoStorge"
                size="mini"
                v-model="keys.submitType"
                style="width: 140px; margin: 24px 10px 0 0"
                placeholder="请选择类型"
              >
                <el-option label="全部" value=""></el-option>
                <el-option label="个人提交考核" :value="1"></el-option>
                <el-option label="组长提交考核" :value="2"></el-option>
                <el-option label="个人提交作业" :value="3"></el-option>
                <el-option label="组长提交作业" :value="4"></el-option>
              </el-select>
              <el-select
                @change="intoStorge"
                size="mini"
                v-model="keys.msgStatus"
                style="width: 100px; margin: 24px 10px 0 0"
                placeholder="请选择状态"
              >
                <el-option label="全部" value=""></el-option>
                <el-option label="未读" :value="0"></el-option>
                <el-option label="已读" :value="1"></el-option>
              </el-select>
              <el-select
                @change="intoStorge"
                size="mini"
                v-model="keys.sortType"
                style="width: 100px; margin: 24px 10px 0 0"
                placeholder="时间排序"
              >
                <el-option label="倒序" value="0"></el-option>
                <el-option label="正序" value="1"></el-option>
              </el-select>
            </div>
          </div>
          <!-- 消息列表 -->
          <div
            v-loading="loading"
            style="
              padding: 8px 40px 0 64px;
              height: calc(100vh - 68px - 18px - 30px - 74px - 10px);
              overflow: auto;
            "
          >
            <div
              @click="routeTo(item)"
              class="msg_item"
              v-for="(item, index) in msgList"
              :key="index"
            >
              <div class="msg_icon">
                <div
                  v-if="item.readStatus == 0 || item.readStatus == false"
                  class="redtip"
                ></div>
                <div v-if="item.msgType == 0">
                  <img
                    v-if="item.examType == 1 || item.examType == 6"
                    src="@/assets/images/classify/msgtype0.png"
                    alt="加载失败"
                  />
                  <img
                    v-if="item.examType == 2"
                    src="@/assets/images/classify/msgtype3.png"
                    alt="加载失败"
                  />
                  <img
                    v-if="!item.examType"
                    src="@/assets/images/classify/msgtype0.png"
                    alt="加载失败"
                  />
                </div>
                <img
                  v-if="item.msgType == 4"
                  src="@/assets/images/classify/msgtype0.png"
                  alt="加载失败"
                />
                <img
                  v-if="item.msgType == 7"
                  src="@/assets/images/classify/msgtype6.png"
                  alt="加载失败"
                />
              </div>
              <div class="msgInfo">
                <div class="flex_bt">
                  <div class="msgName" v-if="item.msgType == 7">
                    <span v-html="item.title"></span>
                  </div>
                  <div class="msgName" v-if="item.msgType == 4">
                    <span v-html="item.title"></span>
                  </div>
                  <div class="msgName" v-if="item.msgType == 0">
                    <b v-if="!item.title"
                    >{{ item.senderNickName }}({{ item.senderName }})</b
                    >
                    <b v-if="item.title">{{ item.title }}</b>
                  </div>
                  <div class="create_time">
                    {{ parseTime(item.createTime) }}
                  </div>
                </div>

                <div
                  class="msgDetail"
                  v-if="item.msgType == 4 || item.msgType == 0"
                >
                  {{ item.content ? item.content : '暂无内容' }}
                </div>
                <div class="msgDetail flexBet" v-if="item.msgType == 7">
                  <span>{{ item.content ? item.content : '暂无内容' }}</span>
                  <div>
                    <el-button
                      type="primary"
                      size="small"
                      v-if="item.markStatus === 1"
                      @click="
                        answerQuestion(
                          item.keyId,
                          item.markStatus,
                          item.recipientId
                        )
                      "
                    >去查看
                    </el-button
                    >
                    <el-button
                      type="primary"
                      size="small"
                      v-if="item.markStatus === 0"
                      @click="
                        answerQuestion(
                          item.keyId,
                          item.markStatus,
                          item.recipientId
                        )
                      "
                    >去填写
                    </el-button
                    >
                  </div>
                </div>
              </div>
            </div>
            <div v-if="msgList.length == 0">
              <el-empty
                style="margin-top: 90px"
                description="暂无事项~"
              ></el-empty>
            </div>
          </div>
        </div>
      </card>
    </div>
  </backContainer>
</template>
<script>
import { getClassroomMessage } from '@/api/home/message'
import { clearUnread } from '@/api/home/message'
import { getCourseIndexTree } from '@/api/course/course'

export default {
  components: {},
  data() {
    return {
      loading: false,
      types: [
        {
          activeimg: require('@/assets/images/classify/classifyActive1.png'),
          img: require('@/assets/images/classify/classify1.png'),
          name: '批改',
          navtab: 0,
          type: 'course'
        }
      ],
      navtab: 0,
      unread: 0,
      keys: {
        msgStatus: 0,
        sortType: '0',
        submitType: '',
        indexId: [],
        courseId: '',
        classId: ''
      },

      messageRefresh: false,
      courseIndexTree: [],
      // 筛选条件
      date: '',
      workstationList: [],
      //
      num: 12,
      statuskey: '',

      msgList: [],
      courseInfo: {},
      msgDetailList: [],
      senderId: '',
      senderName: '',
      sendmsg: '',
      question: false
    }
  },
  created() {
    let keys = localStorage.getItem('teacherMsgStatus')
    if (keys){
      this.keys = JSON.parse(keys)
    }
    let courseinfo = localStorage.getItem('COURSE_INFO')
    this.courseInfo = JSON.parse(courseinfo)
    this.getMessageList()
    this.refreshCategoryTree()
  },
  destroyed() {
  },
  mounted() {
    this.$EventBus.$on('refresh', (data) => {
      console.log('>>>>>>refreshMessage')
      if (data) {
        this.$nextTick(() => {
          this.getMessageList()
        })
      }
    })
  },
  beforeDestroy() {
    this.$EventBus.$off('refresh')
  },
  watch: {},
  methods: {
    /**刷新分类树 */
    async refreshCategoryTree() {
      let res = await getCourseIndexTree(this.$route.query.courseId)
      const { code, data } = res
      if (code == 200) {
        this.courseIndexTree = data.children
      }
    },
    // 打开问卷
    answerQuestion(id, markStatus, userId) {
      this.$router.push({
        path: '/question',
        query: {
          id: id,
          markStatus: markStatus,
          userId: userId
        }
      })
    },
    async clearUnread() {
      if (this.unread <= 0) {
        return
      }
      let res = await clearUnread(this.courseInfo.courseSchedulingId)
      if (res.code == 200) {
        this.getMessageList()
      }
    },
    routeTo(item) {
      console.log('routeTo', item)
      if (item.msgType == 0) {
        this.$router.push({
          path: '/approvalAnswer',
          query: {
            keyId: item.keyId,
            userId: item.senderId,
            approvalType: 1
          }
        })
      }
    },
    intoStorge() {
      let keys = JSON.stringify(this.keys)
      localStorage.setItem('teacherMsgStatus', keys)
      this.getMessageList()
    },
    async getMessageList() {
      let COURSE_INFO = localStorage.getItem('COURSE_INFO')
      let courseInfo = JSON.parse(COURSE_INFO)
      let params = {
        indexId: this.keys.indexId?.length ? this.keys.indexId.at(-1) : '',
        sortType: this.keys.sortType,
        readStatus: this.keys.msgStatus,
        courseSchedulingId: courseInfo.courseSchedulingId
      }
      this.loading = true
      let res = await getClassroomMessage(params)
      const { code, data } = res
      if (code == 200) {
        let total = 0
        if (data.length > 0) {
          for (const row of data) {
            if (row.readStatus == 0) {
              total++
            }
          }
        }
        this.unread = total
        //this.keys.submitType 1.考核个人提交2.考核小组提交3.作业个人提交4.作业小组提交

        if (this.keys.submitType) {
          this.msgList = data.filter((row) => {
            return row.submitType == this.keys.submitType
          })
        } else {
          this.msgList = data
        }
        this.loading = false
      }
    },
    changeType(e) {
      this.navtab = e.navtab
    }
  }
}
</script>
<style scoped lang="scss">
.topline {
  padding: 25px 0 22px 36px;
  font-size: 18px;
  font-family: PingFangSC-Semibold, PingFang SC, sans-serif;
  font-weight: 600;
  color: #333333;
  line-height: 25px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #edeff0;

  .clear_all_icon {
    width: 18px;
    height: 18px;
    cursor: pointer;
    user-select: none;
    margin-left: 6px;
  }
}

.topline_right {
  padding: 25px 0 22px 36px;
  font-size: 18px;
  font-family: PingFangSC-Semibold, PingFang SC, sans-serif;
  font-weight: 600;
  color: #333333;
  line-height: 25px;
  display: flex;
  align-items: center;

  .clear_all_icon {
    width: 18px;
    height: 18px;
    cursor: pointer;
    user-select: none;
    margin-left: 6px;
  }
}

.types {
  .list {
    .temp {
      width: 88%;
      height: 50px;
      margin: 6px auto;
      border-radius: 8px;
      font-size: 16px;
      color: #333333;
      line-height: 62px;
      display: flex;
      align-items: center;
      cursor: pointer;
      user-select: none;
      position: relative;

      .icon {
        margin: 0 17px 0 27px;
        width: 18px;
        height: 18px;
      }

      .tag {
        position: absolute;
        top: 8px;
        right: 8px;
        width: 16px;
        height: 16px;
        background: red;
        border-radius: 50%;
        font-size: 10px;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }

    .active {
      background: #f5faf9 !important;
      color: #28b28b !important;
    }
  }
}

.msg_item {
  width: 100%;
  display: flex;
  align-content: center;
  margin-top: 20px;
  cursor: pointer;
  user-select: none;

  .msg_icon {
    position: relative;

    .redtip {
      top: 0;
      right: 0;
      width: 8px;
      height: 8px;
      background: #ff3b30;
      border-radius: 4px;
      position: absolute;
    }

    img {
      width: 40px;
      height: 40px;
    }
  }

  .msgInfo {
    flex: 1;
    padding-left: 16px;
    box-sizing: border-box;

    .flex_bt {
      display: flex;
      justify-content: space-between;
      align-content: center;

      .msgName {
        width: 70%;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC, sans-serif;
        font-weight: 400;
        color: #333333;
        overflow-wrap: break-word;
        line-height: 20px;

        b {
          word-break: break-all; /* 允许在单词内换行 */
          font-size: 16px;
          font-family: PingFangSC-Semibold, PingFang SC, sans-serif;
          font-weight: 600;
          color: #333333;
          line-height: 16px;
        }
      }

      .create_time {
        text-align: left;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC, sans-serif;
        font-weight: 400;
        color: #999999;
        line-height: 15px;
      }
    }

    .msgDetail {
      margin-top: 8px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC, sans-serif;
      font-weight: 400;
      color: #999999;
      line-height: 22px;
      border-bottom: 1px solid #edeff0;
      padding-bottom: 4px;
      box-sizing: border-box;
    }
  }
}
</style>
